<template>
	<view class="index-container">
		<!-- 轮播 -->
		<u-swiper :list="swiperlist"></u-swiper>
		<!-- 滚动通知 -->
		<u-notice-bar :text="noticebar" direction="column"></u-notice-bar>
		<!-- 笔试题库 -->
		<view class="index-writeq">
			<view class="index-writeq-title">
				<text>笔试题库</text>
				<navigator url="../writebrush/writebrush">
					<u-button text="去刷题" type="primary"></u-button>
				</navigator>
			</view>
			<u-line></u-line>
		</view>
		<!-- 面试题库 -->
		<view class="index-faceq">
			<view class="index-faceq-title">
				面试题库
			</view>
			<u-line></u-line>
			<!-- <u-line></u-line> -->
			<view class="index-faceq-list">
				<u-grid>
					<u-grid-item v-for="(item,index) in list" :key="index"
						customStyle="padding-top: 10px; padding-bottom: 10px" @click="toBrush(item)">
						<image :src="'../../static/imgs/' + item.img" mode="widthFix"></image>
						<text class="grid-text">{{item.title}}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo
	} from "@/utils/utils.js";
	export default {
		data() {
			return {
				listArr: [{
						id: 0,
						title: '我是标题1',
						content: '我是内容1'
					},
					{
						id: 1,
						title: '我是标题2',
						content: '我是内容2'
					},
					{
						id: 2,
						title: '我是标题3',
						content: '我是内容3'
					},
					{
						id: 3,
						title: '我是标题4',
						content: '我是内容4'
					},
					{
						id: 4,
						title: '我是标题5',
						content: '我是内容5'
					},
				],


				swiperlist: [require("../../static/imgs/article/1.jpg")],
				noticebar: [
					'截至2023/03/21, 共录入面试题: 2033题'
				],
				list: [{
						id: 1,
						img: "HTML5.png",
						title: 'HTML5'
					},
					{
						id: 2,
						img: "CSS3.png",
						title: 'CSS3'
					},
					{
						id: 3,
						img: "JavaScript.png",
						title: 'JavaScript'
					},
					{
						id: 4,
						img: "Vue.png",
						title: 'Vue'
					},
					{
						id: 5,
						img: "react.png",
						title: 'React'
					},
					{
						id: 6,
						img: "Nodejs.png",
						title: 'Node'
					}, {
						id: 7,
						img: "suanfa.png",
						title: '数据可视化'
					}, {
						id: 8,
						img: "typescript.png",
						title: 'typescript'
					}, {
						id: 9,
						img: "wangluo.png",
						title: '计算机网络'
					}
				],
			}
		},
		methods: {
			toBrush(item) {
				let _this = this;
				let info = uni.getStorageSync("info");
				if (info) {
					// 跳转页面
					uni.navigateTo({
						url: `/pages/brush/brush?id=${item.id}&title=${item.title}`
					})
				} else {
					uni.showModal({
						title: '友情提示',
						content: '您需要先登录才能进行后续操作',
						confirmText: '确认登录',
						showCancel: false,
						success(res) {
							if (res.confirm) {
								getUserInfo().then(obj => {
									uni.navigateTo({
										url: `/pages/brush/brush?id=${item.id}&title=${item.title}`
									})
								}).catch(err => {
									return new Error();
								});
								// let res = getUserInfo().then(res => {
								// 	let info = {};
								// 	// 将得到的值存入到本地
								// 	let {
								// 		avatarUrl,
								// 		nickName
								// 	} = res.userInfo;
								// 	info.avatarUrl = avatarUrl;
								// 	info.nickName = nickName;
								// 	uni.setStorageSync("info", info);

								// 	// 跳转页面
								// 	uni.navigateTo({
								// 		url: `/pages/brush/brush?id=${item.id}&title=${item.title}`
								// 	})
								// }).catch(err => {
								// 	return new Error();
								// })

							}
						}
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	.index-writeq {
		.index-writeq-title {
			display: flex;
			justify-content: space-between;
			padding: 18rpx 24rpx;
			line-height: 80rpx;
			font-weight: bold;

			button {
				width: 180rpx;
				height: 80rpx;
				border-radius: 40rpx;
				margin: 0;
				font-weight: normal;
			}
		}
	}

	.index-faceq {
		.index-faceq-title {
			font-weight: bold;
			padding: 18rpx 24rpx;
			line-height: 80rpx;
		}

		.index-faceq-list {
			image {
				width: 120rpx;
			}
		}
	}
</style>
